<template>
  <div>
    <myheader></myheader>
    <div class="clear"></div>

    <!-- <b class="line"></b> -->
    <div class="concent" style="width:1200px;">
      <!--地址 -->
      <div class="paycont" style="width:1200px">

        <!--订单 -->
        <div class="concent">
          <div id="payTable">
            <h3>订单信息</h3>
            <div class="cart-table-th">
              <div class="wp">

                <div class="th th-item">
                  <div class="td-inner" style="text-align:left">商品信息</div>
                </div>
                <div class="th th-price">
                  <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                  <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                  <div class="td-inner">金额</div>
                </div>
                <div class="th th-oplist">
                  <div class="td-inner">配送方式</div>
                </div>

              </div>
            </div>
            <div class="clear"></div>

            <div class="item-list" style="margin-top:20px;border-bottom:1px solid">
              <div style="width:100%;height:30px;padding:0 10px">
                <em class="font-weight: bold;">卖家：</em><em>{{order.mchtName}}</em>
              </div>
              <div class="bundle-main" v-for="orderItem in order.orderDetails">
                <ul class="item-content clearfix">
                  <div class="pay-phone" v-on:click="toItem(orderItem.itemId)">
                    <li class="td td-item" style="width:50%">
                      <div class="item-pic" style="width:80px;height:80px">
                        <a href="javascript:;;" class="J_MakePoint">
                          <img v-bind:src="orderItem.mainImg" class="itempic J_ItemImg" style="width:80px"></a>
                      </div>
                      <div class="item-info" style="width:100%">
                        <div class="item-basic-info" style="width:100%">
                          <a href="javascript:;;" class="item-title J_MakePoint" data-point="tbcart.8.11">{{orderItem.itemName}}</a>
                        </div>
                      </div>
                    </li>
                    <li class="td td-price">
                      <em class="J_Price price-now">{{orderItem.transPrice}}</em>
                    </li>
                  </div>
                  <li class="td td-amount" style="margin-top:20px">
                    <div class="amount-wrapper">
                      <em class="J_Price price-now">{{orderItem.buyNum}}</em>
                    </div>
                  </li>
                  <li class="td td-sum">
                    <div class="td-inner">
                      <em tabindex="0" class="J_ItemSum number">{{orderItem.orderPrice}}</em>
                    </div>
                  </li>
                  <li class="td td-oplist">
                    <div class="td-inner">
                      <span class="phone-title">配送方式</span>
                      <div class="pay-logis" v-if="transType==1">
                        快递<b class="sys_item_freprice">{{orderItem.postage}}</b>元
                      </div>
                      <div class="pay-logis" v-else>
                        无
                      </div>
                    </div>
                  </li>

                </ul>
                <div class="clear"></div>
              </div>

              <div class="order-comment" style="padding:0 10px">
                <div class="order-user-info">
                  <div id="holyshit257" class="memo">
                    <label>备注：</label>{{order.comment}}
                  </div>
                </div>
              </div>

              <div class="buy-point-discharge ">
                <p class="price g_price ">
                  合计（含运费） <span>¥</span>
                  <em class="pay-sum" v-text="order.transPrice+order.postage" v-if="transType==1"></em>
                  <em class="pay-sum" v-text="order.transPrice" v-else></em>
                </p>
              </div>
            </div>
            <!-- orders -->

            <div class="clear"></div>
          </div>
        </div>

        <!--支付方式-->
        <!-- <div class="logistics">
          <h3>选择支付方式</h3>
          <ul class="pay-list">
            <li class="pay card">
              <el-radio v-model="payType" label="2">支付宝</el-radio>
            </li>
            <li class="pay card">
              <el-radio v-model="payType" label="3">微信</el-radio>
            </li>
          </ul>
        </div> -->
        <div class="clear"></div>

        <div class="clear"></div>

        <!--信息 -->
        <div class="order-go clearfix">
          <em>确认信息</em>
          <div class="pay-confirm clearfix">
            <div style="width:50%;float:right;border:2px solid rgb(255,68,0);padding:10px">
              <div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
                <span class="price g_price ">
                  <span>¥</span>
                  <em class="style-large-bold-red " id="J_ActualFee" v-if="transType==1" >
                    <span v-if="allPrice+allPostage<0">0</span>
                    <span v-else v-text="allPrice+allPostage"></span>
                  </em>
                  <em class="style-large-bold-red " id="J_ActualFee" v-else v-text="allPrice">
                    <span v-if="allPricee<0" >0</span>
                    <span v-else v-text="allPrice"></span>
                  </em>
                </span>
              </div>

              <div id="holyshit268" class="pay-address">
                <p class="buy-footer-address">
                  <span class="buy-line-title">交易方式：</span>
                  <span v-text="formatterTransType()">

                  </span>
                </p>
                <p class="buy-footer-address">
                  <span class="buy-line-title">收货地址：</span>
                  <span>
                    <span class="province">{{checkAddr.province}}</span>
                    <span class="city">{{checkAddr.city}}</span>
                    <span class="dist">{{checkAddr.county}}</span>
                    <span class="street">{{checkAddr.details}}</span>
                  </span>
                </p>
                <p class="buy-footer-address">
                  <span class="buy-line-title">收货人：</span>
                  <span class="buy-address-detail">
                    <span class="buy-user">{{checkAddr.name}} </span>
                    <span class="buy-phone">{{checkAddr.phone}}</span>
                  </span>
                </p>
              </div>
            </div>
            <div class="pay-total">
              <!--优惠券 -->
              <div class="buy-agio">
                <li class="td td-bonus">
                  <el-switch v-model="balance" active-color="#13ce66" inactive-color="#ff4949" @change="balanceChange()">
                  </el-switch>
                  <span class="bonus-title">使用账户余额抵扣</span>
                  <br>
                  <em>剩余余额{{account.balance}}</em>
                </li>

              </div>
              <div class="clear"></div>
            </div>

            <div id="holyshit269" class="submitOrder" v-on:click="payOrder()">
              <div class="go-btn-wrap">
                <a id="J_Go" href="javascript:;;" class="btn-go" tabindex="0" title="点击此按钮，提交订单">确认支付</a>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <div class="clear"></div>
    </div>

    <foot></foot>
    <div class="clear"></div>
    <navfull></navfull>
    <form action="http://localhost:8000/trade/aliPayPage" method="get" id="pay_form" style="display:none">
      <input type="text" name="orderId" v-model="payId" />
      <input type="text" name="productCode" v-model="order.orderDetails[0].itemId" />
      <input type="text" name="totalAmount" v-model="order.transPrice" />
      <input type="text" name="subject" v-model="order.orderDetails[0].itemName" />
      <input type="text" name="balance" v-model="balance" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'pay',
  data () {
    return {
      transType: 0,
      payType: 2,
      order: {},
      allPrice: 0,
      allPostage: 0,
      balance: false,
      checkAddr: {},
      payId: 0,
      account: {}
    }
  },
  mounted () {
    this.qryOrders();
    this.qryAccount();
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  methods: {
     qryAccount () {
      this.axios.get("/user/account/account").then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.account = result.data;
        }
      })
    },
    formatterTransType () {
      switch (this.transType) {
        case 1:
          return "邮寄";
        case 2:
          return "面交";
        case 3:
          return "自提";
        default:
          return "未选择";
      }
    },
    balanceChange () {
      if (this.balance) {
        this.allPrice -= this.account.balance;
      } else {
        this.allPrice += this.account.balance;
      }
    },
    qryOrders () {
      var orderId = this.$route.query.orderId;
      this.axios.get("/trade/order/orders", {
        params: {
          orderIds: orderId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.order = result.data[0];
          this.transType = this.order.tradeType;
          this.allPrice += this.order.transPrice;
          this.allPostage += this.order.postage;
          var addrId = this.order.addressId;
          this.axios.get("/user/address/address", {
            params: {
              id: addrId
            }
          }).then((res) => {
            var result = res.data;
            if (result.code == 200) {
              this.checkAddr = result.data;
            }
          })
        }
      })
    },
    toItem (itemId) {
      this.$router.push({
        name: "item",
        query: {
          itemId: itemId
        }
      })
    },
    payOrder () {
      this.axios.get("/trade/pay/pay/validate", {
        params: {
          orderId: this.order.id,
          isBalance: this.balance
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          if (result.msg == "paid") {
            this.$router.push({
              name: 'paysuccess',
              query: {
                paytype: "balance",
                total_amount: result.data,
                order_id: this.order.id
              }
            })
          } else {
            this.payId = result.data;
            this.payPwd();
          }
        } else {
          this.$confirm(result.msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push({
              name: 'order'
            })
          });
        }
      })
    },
    payPwd () {
      this.$prompt('请输入支付密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType:'password'
      }).then(({ value }) => {
        this.axios.get("/user/validate/paypwd/"+this.$md5(value)).then((res)=>{
          let result = res.data;
          if(result.code==200){
            this.toPayPage();
          }else{
            this.$layer.msg("支付密码错误");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    toPayPage () {
      this.$nextTick(() => {
        var form = document.getElementById('pay_form');
        form.submit();
      })

    }


  }
}
</script>

<style scoped>
@import "../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../assets/basic/css/demo.css";
@import "../../assets/css/cartstyle.css";
@import "../../assets/css/jsstyle.css";
@import "../../assets/css/common/commonStyle.css";
</style>
